<template>
  <teleport
    v-if="fullscreen"
    to="body"
  >
    <div
      v-show="show"
      class="loading-mask fullscreen"
      :style="{ background }"
    >
      <div class="loading-spinner">
        <ElIcon class="loading-icon">
          <Loading />
        </ElIcon>
        <p
          v-if="text"
          class="loading-text"
        >
          {{ text }}
        </p>
      </div>
    </div>
  </teleport>

  <div
    v-else
    v-show="show"
    class="loading-mask local"
    :style="{ background }"
  >
    <div class="loading-spinner">
      <ElIcon class="loading-icon">
        <Loading />
      </ElIcon>
      <p
        v-if="text"
        class="loading-text"
      >
        {{ text }}
      </p>
    </div>
  </div>
</template>

<script setup lang="js">
import { defineProps } from 'vue'; 
import { Loading } from '@element-plus/icons-vue';
import { ElIcon } from 'element-plus';
defineProps({
  text: {
    type: String,
    default: '玩命加载中...',
  },
  background: {
    type: String,
    default: 'rgba(0, 0, 0, 0.7)',
  },
  spinner: {
    type: String,
    default: 'el-icon-loading',
  },
  show: {
    type: Boolean,
    default: false,
  },
  fullscreen: {
    type: Boolean,
    default: false,
  },
});
</script>

<style scoped>
/* 全屏加载时的样式 */
.loading-mask.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
}

/* 局部加载时的样式 */
.loading-mask.local {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
}

/* 通用loading样式 */
.loading-mask {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-icon {
  font-size: 24px;
  color: #409eff;
  animation: loading-rotate 2s linear infinite;
}

.loading-text {
  margin-top: 8px;
  font-size: 14px;
  color: #666;
}

/* 加载动画 */
@keyframes loading-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>